<template>
  <div class="userinfo">
    <el-row :gutter="20">
      <el-col :span="7">
        <div class="grid-content">
          <div class="cefu">
            <img src="static/images/cefu.png" alt="">
            <div class="cont">
              <p>余额</p>
              <p>769.00￥</p>
            </div>
          </div>
          <div class="cefu">
            <img src="static/images/zhanghu.png" alt="">
            <div class="cont">
              <p>充值</p>
              <el-button type="text" @click="dialogFormVisible = true">立即充值</el-button>
              <el-dialog :visible.sync="dialogFormVisible">

                <div slot="title" class="fde" style="padding:10px;height:80px;text-align:center;background: url('static/images/czbg_03.png') no-repeat center;background-size: cover ;">
                  <h2>充值中心</h2>
                </div>

                <el-form ref="form" :model="form" label-width="100px">
                  <el-form-item label="输入充值金额" prop="text">
                    <el-input v-model="form.text"></el-input>
                  </el-form-item>
                  <el-form-item label="充值方式" id="zhifuss">
                    <el-button class="active"><img src="static/images/weixin_03.png" alt=""><img src="static/images/weixin1.png" alt="">微信支付</el-button>
                    <el-button><img src="static/images/zhifubao1.png" alt=""><img src="static/images/zhifubao_05.jpg" alt="">支付宝支付</el-button>
                  </el-form-item>
                  <el-form-item label="">
                    <span style="color:#ff8b00;font-size:17px;">应支付：44551.00元</span>
                    <div id="erweimas">
                      <div class="erweima active">
                        <img src="static/images/erweima_10.jpg" alt="">
                        <p><span><img src="static/images/weixin_03.png" alt=""></span>使用微信扫码付款</p>
                      </div>
                      <div class="erweima">
                        <img src="static/images/erweima_10.jpg" alt="">
                        <p><span><img src="static/images/zhifubao1.png" alt=""></span>使用支付宝扫码付款</p>
                      </div>
                    </div>
                  </el-form-item>
                </el-form>

              </el-dialog>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="17">
        <div class="content">
          <div class="grid-content">
            <div style="height:15px;background:#ff8b00;border-radius:15px;"></div>
            <div class="title">
              <span>基本信息</span>
              <span>温馨提示：只有一次更改机会，下次更改信息请联系客服</span>
            </div>
            <el-form ref="form" :model="form" label-width="80px">
              <el-form-item label="企业名称" prop="name">
                <el-input v-model="form.name" placeholder="企业名称" > 
                  <i slot="append" class="el-icon-edit-outline"></i>
                </el-input>
              </el-form-item>
              <el-form-item label="联系人" prop="ren">
                <el-input v-model="form.ren" placeholder="张锋">
                  <i slot="append" class="el-icon-edit-outline"></i>
                </el-input>
              </el-form-item>
              <el-form-item label="联系电话" prop="ipone">
                <el-input v-model="form.ipone" placeholder="185685211">
                  <i slot="append" class="el-icon-edit-outline"></i>
                </el-input>
              </el-form-item>
              <el-form-item label="企业性质" prop="XZ">
                <el-input v-model="form.XZ" placeholder="企业名称">
                  <i slot="append" class="el-icon-edit-outline"></i>
                </el-input>
              </el-form-item>
              <el-form-item label="所属行业" prop="list">
                <el-input v-model="form.list" placeholder="公式">
                  <i slot="append" class="el-icon-edit-outline"></i>
                </el-input>
              </el-form-item>
              <el-form-item label="企业地址" prop="dz">
                <el-input v-model="form.dz" placeholder="北京">
                  <i slot="append" class="el-icon-edit-outline"></i>
                </el-input>
              </el-form-item>
              <el-form-item class="btnLs">
                <el-button>提&nbsp;交</el-button>
                <el-button>取&nbsp;消</el-button>
              </el-form-item>
               <div class="wen"><img src="static/images/wen_03.png" alt="">如有疑问请联系客服：<span>400-10000-999</span></div>
            </el-form>
          </div>
        </div>
       
      </el-col>
    </el-row>

  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogFormVisible: false,
      form: {},
      formLabelWidth: "120px"
    }
  },
  updated(){
    var tabs=document.getElementById("zhifuss").getElementsByTagName("button");
    var divs=document.getElementById("erweimas").getElementsByClassName("erweima");
    for(var i=0;i<tabs.length;i++){
    tabs[i].onclick=function(){change(this);}
    }
    function change(obj){
      for(var i=0;i<tabs.length;i++){
      if(tabs[i]==obj){
          tabs[i].className="active el-button el-button--default";
          divs[i].className="active erweima";
        }else{
          tabs[i].className="el-button el-button--default";
          divs[i].className="erweima";
        }
      }
    } 
  }
}
</script>
<style rel="stylesheet/scss" lang="scss">
.btnLs{
  text-align: center;
   button{
  background: rgb(255, 139, 0);
  border:1px solid rgb(255, 139, 0);
  span{
  color:#fff;
  }
  &:hover{
    opacity: .9;
    background: rgb(255, 139, 0);
  border:1px solid rgb(255, 139, 0);
  span{
  color:#fff;
  }
  }
}
}
.el-dialog__header {
  padding: 0px;
  h2 {
    color: #fff;
  }
  .el-dialog__headerbtn .el-dialog__close {
    color: #fff;
  }
}
.userinfo .el-row .cefu .cont .el-dialog__body .el-form-item__content .el-button img{
  display: none;
}
.userinfo .el-row .cefu .cont .el-dialog__body .el-form-item__content .el-button:nth-child(1){
   border:1px solid #3daf32 !important;
  background: none !important;
  margin-right: 30px;
  color: #3daf32 !important;
  img:first-child{
    display: none;
  }
  img:last-child{
    display: inline-block;
  }
}
.userinfo .el-row .cefu .cont .el-dialog__body .el-form-item__content .el-button:nth-child(1).active{
   background: #3daf32 !important;
  margin-right: 30px;
  color: #fff !important;
   img:first-child{
    display: inline-block;
  }
  img:last-child{
    display: none;
  }
}
.userinfo .el-row .cefu .cont .el-dialog__body .el-form-item__content .el-button:nth-child(2){
   border: 1px solid #2197d8 !important;
    color: #2197d8 !important;
    img:first-child{
    display: none;
  }
  img:last-child{
    display: inline-block;
  }
}
.userinfo .el-row .cefu .cont .el-dialog__body .el-form-item__content .el-button:nth-child(2).active{
    border: 1px solid #2197d8 !important;
    color: #fff !important;
    background: #2197d8 !important;
     img:first-child{
    display: inline-block;
  }
  img:last-child{
    display: none;
  }
}
.userinfo {
  padding: 2% 3%;
  background: #f7f7f7;
  .wen{
    text-align: center;
    color: #657180;
    font-size: 18px;
    span{
      color: #ff8b00;
    }
    img{
          position: relative;
    top: 5px;
    margin-right: 5px;
    }
  }
  .el-row {
    margin-top: 2%;
    .cefu {
      position: relative;
      margin-bottom: 35px;
      img {
        max-width: 100%;
        height: auto;
        display: block;
      }
      .cont {
        position: absolute;
        top: calc(50% - 37px);
        top: -webkit-calc(50% - 37px);
        left: 25%;
        p {
          color: #fff;
          margin: 10px 0;
          &:nth-child(2) {
            font-size: 30px;
          }
        }
        .el-button {
          color: #fff;
          padding: 6px 15px;
          border-radius: 6px;
          border: 1px solid #fff;
          
        }
        .el-dialog__body {
          width: 508px;
          margin: 0 auto;
          .el-form-item__content {
            .erweima {
              display: none;
              p {
                color: #000;
                font-size: 16px;
                margin: 0;
                span {
                  display: inline-block;
                  text-align: center;
                  background: #3daf32;
                  margin-right: 8px;
                  border-radius: 50%;
                  width: 40px;
                  height: 40px;
                  position: relative;
                  top: 13px;
                  img {
                    margin: 9px auto;
                  }
                }
              }
              &.active{
                display: block;
              }
            }
            .el-button {
              padding: 12px 30px 12px 56px;
              font-size: 16px;
              position: relative;
              img {
                margin-right: 8px;
                position: absolute;
                top: 9px;
                left: 25px;
              }
              &:nth-child(1) {
                background: #3daf32;
                margin-right: 30px;
                color: #fff;
                &:hover {
                  background: #54b54a;
                }
              }
              &:nth-child(2) {
                border: 1px solid #2197d8;
                color: #2197d8;
              }
            }
          }
        }
      }
    }
    .content {
      background: #fff;
      padding: 0;
      border-radius: 8px;
      .el-form {
        padding: 1% 6% 2%;
      }
      .title {
        padding: 4% 6%;
        span {
          color: #fd7a7a;
          display: inline-block;
          &:nth-child(1) {
            font-size: 18px;
            color: #000;
            margin-right: 16px;
          }
        }
      }
    }
  }
}
.userinfo .el-row .el-col-17{
  .el-input-group--append .el-input__inner{
          border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
  }
  .el-input-group__append{
    border: none;
    background: none;
    position: absolute;
    right: 10px;
    top: 0;
    color: #2197d8;
    height: 40px;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
  }
}
@media screen and (max-width: 768px) {
  .userinfo .el-row .el-col-7 {
    width: 100%;
  }
  .userinfo .el-row .el-col-17 {
    width: 100%;
  }
}
@media screen and (max-width: 460px) {
  .userinfo .el-form .el-form-item {
    margin-bottom: 15px;
  }
  .userinfo .el-form .el-form-item label {
    width: 100% !important;
    text-align: left;
    line-height: 30px;
  }
  .userinfo .el-form .el-form-item .el-form-item__content {
    margin-left: 0 !important;
  }
    .userinfo .el-row .el-col-7{width: 100%;}
    .userinfo .el-row .el-col-17{width: 100%;}
    .el-dialog,.userinfo .el-row .cefu .cont .el-dialog__body{width: 90%;}
    .fde{height: 60px !important;padding: 0 !important;line-height: 60px !important;}
    .el-dialog__body{padding: 0}

}
@media screen and (max-width: 460px){
    .userinfo .el-form .el-form-item {margin-bottom: 15px;}
    .userinfo .el-form .el-form-item label{width: 100% !important;text-align: left;line-height: 30px;}
    .userinfo .el-form .el-form-item .el-form-item__content{margin-left: 0 !important;}
    .userinfo .el-row .cefu .cont .el-dialog__body .el-form-item__content .el-button:nth-child(1){margin-right: 0;margin-bottom: 12px;}
    .el-button+.el-button{
        margin-left: 0
    }
    .userinfo .el-row .cefu .cont .el-dialog__body .el-form-item__content .erweima p span{
        width: 30px;
        height: 30px;
    }
    .userinfo .el-row .cefu .cont .el-dialog__body .el-form-item__content .erweima p span img{
        margin: 7px auto;
        height: 15px;
    }

}
</style>
